<template>
  <div class='active-user'>
    <div class="kanban-body">

      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="日活跃用户数"
                     name="first">
          <div class="coursesonline"></div>
        </el-tab-pane>
        <el-tab-pane label="周活跃用户数"
                     name="second">
          <div class="coursesonlineTwo"
               style="width:1421px;height:500px"></div>
        </el-tab-pane>
        <el-tab-pane label="月活跃用户数"
                     name="third">
          <div class="coursesonlineTre"
               style="width:1421px;height:500px"></div>
        </el-tab-pane>

      </el-tabs>
      <div class="bodyRight">
        <div class="bodyRightL">
          <el-button size="small"
                     @click="onDateClick('isWeekShow')"
                     :class="{buttonbgc:isWeekShow}">按周</el-button>
          <el-button size="small"
                     @click="onDateClick('isMonthShow')"
                     :class="{buttonbgc:isMonthShow}">按月</el-button>
          <el-button size="small"
                     @click="onDateClick('isYearShow')"
                     :class="{buttonbgc:isYearShow}">按年</el-button>
        </div>
        <div class="bodyRightR">
          <div class="block">
            <el-date-picker v-model="value1"
                            :type="pickerType"
                            :format="pickerFormat"
                            placeholder="选择日期"
                            size="small"
                            @change="changeweek">
            </el-date-picker>

          </div>

        </div>
      </div>
    </div>
    <div class="activeUser-footer">
      <!-- <div class="footer-table"> -->
      <el-table :data="tableData"
                style="width: 100%"
                border>
        <el-table-column prop="day"
                         label="时间">
        </el-table-column>
        <el-table-column prop="dau"
                         label="DAU（日活跃用户数）">
        </el-table-column>
        <el-table-column prop="wau"
                         label="WAU（周活跃用户数）">
        </el-table-column>
        <el-table-column prop="mau"
                         label="MAU（月活跃用户数）">
        </el-table-column>
      </el-table>
      <!-- </div> -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getActiveUser } from '@/api/user'
export default {
  name: 'kanBan',
  components: {},
  props: {},
  data() {
    return {
      activeName: 'first',
      isWeekShow: true,
      isMonthShow: false,
      isYearShow: false,
      value1: new Date(),
      page: 1,
      pagesize: 10,
      total: 0,
      startDate: '',
      pickerType: 'week',
      pickerFormat: 'yyyy 第 WW 周',
      endDate: '',
      courseUserList: [],
      // echarts图表
      options: {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0.4,
          borderColor: '#fff',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true,
            areaStyle: {
              color: '#f3fffe'
            },
            lineStyle: {
              color: '#2075f1'
            }
          }
        ]
      },
      tableData: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    // tab栏切换
    handleClick() {
      console.log(this.activeName)
      // this.page = 1
      this.loadCourseOnline()
    },
    // 周月年按钮切换
    onDateClick(type) {
      // console.log(this.value1)
      if (type === 'isWeekShow') {
        this.isWeekShow = true
        this.isMonthShow = false
        this.isYearShow = false
        this.pickerType = 'week'
        this.pickerFormat = 'yyyy 第 WW 周'
      } else if (type === 'isMonthShow') {
        this.isWeekShow = false
        this.isMonthShow = true
        this.isYearShow = false
        this.pickerType = 'month'
        this.pickerFormat = 'yyyy 年 M 月'
      } else {
        this.isWeekShow = false
        this.isMonthShow = false
        this.isYearShow = true
        this.pickerType = 'year'
        this.pickerFormat = 'yyyy 年'
      }
      this.changeweek()
      // this.loadCourseOnline()
    },
    // 请求模块
    async loadCourseOnline() {
      this.options.xAxis.data = []
      this.options.series[0].data = []
      // if (this.activeName === 'first') {
      const { data } = await getActiveUser({
        startDate: this.startDate,
        endDate: this.endDate
      })
      const res = data.result

      console.log(res)
      this.tableData = res
      this.total = this.tableData.length
      // 设置分页
      var startPage = (this.page - 1) * this.pagesize
      var endPage = this.page * this.pagesize
      console.log(startPage, endPage)

      this.tableData = data.result.slice(startPage, endPage)
      this.total = data.result.length

      res.forEach(item => {
        const xAxissss = this.$options.filters['formatDateTwo'](item.day)
        // console.log(xAxissss)
        this.options.xAxis.data.push(xAxissss)
        if (this.activeName === 'first') {
          this.options.series[0].data.push(item.dau)
        } else if (this.activeName === 'second') {
          this.options.series[0].data.push(item.wau)
        } else {
          this.options.series[0].data.push(item.mau)
        }
      })
      this.$nextTick(function() {
        this.getEchartsPic()
      })
    },
    // 日期选择器改变事件
    changeweek() {
      if (this.pickerType === 'week') {
        var d = new Date(this.value1)
        // 起始日期
        var youWant =
          d.getFullYear() +
          '-' +
          (d.getMonth() + 1 + '').padStart(2, '0') +
          '-' +
          (d.getDate() - 1 + '').padStart(2, '0')
        // this.startDate = youWant

        // 终止日期
        var d2 = new Date(+new Date(this.value1) + 5 * 86400000)
        var youWant2 =
          d2.getFullYear() +
          '-' +
          (d2.getMonth() + 1 + '').padStart(2, '0') +
          '-' +
          (d2.getDate() + '').padStart(2, '0')
        // this.endDate = youWant2

        this.startDate = youWant
        this.endDate = youWant2

        // this.weekChange()
      } else if (this.pickerType === 'month') {
        // console.log('这是month页面', this.value1)
        const dt = new Date(this.value1)
        const month = dt.getMonth() + 1
        // console.log(month)
        if ([1, 3, 5, 7, 8].includes(month)) {
          // console.log('有三十天')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-30'
        } else if (month === 2) {
          // console.log('二月')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-28'
        } else {
          // console.log('29天')
          this.startDate =
            this.$options.filters['formatDateThree'](this.value1) + '-01'
          this.endDate =
            this.$options.filters['formatDateThree'](this.value1) + '-29'
        }
      } else {
        console.log('这是year页面', this.value1)
        const dt = new Date(this.value1)
        const year = dt.getFullYear()
        console.log('这是year页面', year)
        if (year === 2020) {
          this.startDate = '2020-01-01'
          this.endDate = '2020-12-31'
        } else if (year === 2021) {
          this.startDate = '2021-01-01'
          this.endDate = '2021-12-31'
        } else {
          this.options.xAxis.data = []
          this.options.series[0].data = []
          return this.getEchartsPic()
        }
      }
      this.loadCourseOnline()
    },
    // 渲染echarts
    getEchartsPic() {
      if (this.activeName === 'first') {
        setTimeout(() => {
          var chartDom = document.querySelector('.coursesonline')
          var myChart = this.$echarts.init(chartDom)
          // this.loadCourseOnline()
          myChart.setOption(this.options)
        }, 0)
      } else if (this.activeName === 'second') {
        setTimeout(() => {
          var chartDomTwo = document.querySelector('.coursesonlineTwo')
          var myChartTwo = this.$echarts.init(chartDomTwo)
          // this.loadCourseOnline()
          myChartTwo.setOption(this.options)
        }, 0)
      } else {
        setTimeout(() => {
          var chartDomTre = document.querySelector('.coursesonlineTre')
          var myChartTre = this.$echarts.init(chartDomTre)
          // this.loadCourseOnline()
          myChartTre.setOption(this.options)
        }, 0)
      }
    },
    handleSizeChange(newVal) {
      this.pagesize = newVal
      this.loadCourseOnline()
    },
    handleCurrentChange(newVal) {
      this.page = newVal
      this.loadCourseOnline()
    }
  },
  created() {
    // this.onWeekClick()
    this.changeweek()
    this.loadCourseOnline()
  },
  mounted() {},
  updated() {}
}
</script>
<style lang='less' scoped>
.active-user {
  background-color: #f5f5f5;
  .kanban-body {
    position: relative;
    height: 520px;
    padding: 25px;
    background-color: #fff;
    margin-top: 15px;
    color: #444444 !important;
    border-radius: 6px;
    /deep/ .el-tabs__nav-wrap::after {
      display: none;
    }
    /deep/ .el-tabs__item {
      font-size: 20px !important;
    }
    /deep/ .el-tabs__active-bar {
      height: 4px !important;
      background-color: #65ded7 !important;
      border-radius: 4px;
    }
    /deep/ .el-tabs__item.is-active {
      color: #185fef !important;
    }
    /deep/ .el-button {
      border: none !important;
    }
    .buttonbgc {
      background-color: #079fff;
      color: #fff;
    }
    .grid-date {
      padding-left: 25px;
    }
    .grid-right {
      margin-top: 10px;
    }
    .coursesonline {
      height: 500px;
      width: 1421px !important;
      // background-color: pink;
    }
    .bodyRight {
      width: 500px;
      position: absolute;
      right: 0px;
      top: 27px;
      .bodyRightR {
        margin-left: 30px;
      }
    }
    .bodyRight > div {
      display: inline-block;
    }
  }
  .activeUser-footer {
    position: relative;
    // height: 660px;
    min-height: 446px !important;
    padding: 20px 30px;
    margin-top: 20px;
    overflow: hidden;
    background-color: #fff;

    /deep/ .el-table th {
      background-color: #f6f7fb;
      text-align: center;
    }
    // .footer-table {
    //   margin-top: 20px;
    // }
    /deep/ .el-table td,
    .el-table th {
      text-align: center;
    }
    /deep/ .el-pagination {
      float: right;
      margin-top: 20px;
    }
  }
}
</style>
